<template>
  <div>
    <a-modal v-model="visible" :title="modal_title" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 返回 </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
        >
          提交
        </a-button>
      </template>
      <div class="input_parts">
        <div class="name_part">
          <div class="name_label">用户名</div>
          <a-input placeholder="请输入用户名" allow-clear v-model="user_name" />
        </div>
        <div class="desc_part">
          <div class="desc_label">角色名</div>
          <a-input
            placeholder="请输入角色名称"
            allow-clear
            v-model="user_desc"
          />
        </div>
        <!-- 树状图多选组件 进行permission 的处理 -->
      </div>
      <!-- 只是在新增的模式下显示 -->
      <div class="permission_part" v-if="ModeModify != true">
        <div class="permission_label">角色</div>
        <a-tree
          v-model="checkedKeys"
          checkable
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :selected-keys="selectedKeys"
          :tree-data="treeData"
          @expand="onExpand"
          @select="onSelect"
        />
      </div>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ModeModify: "",
      // 树形结构 属性
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      // 动态显示弹框标题
      modal_title: "",
      loading: false,
      visible: false,
      //  树状图的选择 内容存入到 value中
      value: undefined,
      // 存储后端角色列表
      treeselect: [],
      //   添加的角色名称
      user_name: "",
      //   添加的角色描述
      user_desc: "",
      // 判断是否是新增
      state_update: false,
      // 点击的ID
      Id: 0,
    };
  },
  created() {},
  //   /admin/actions
  methods: {
    // 树形控件处理
    copeThree(data) {
      let modules = [];
      // 遍历每一项 先构建该项的二级列表,
      data.forEach((item) => {
        // 构建二级列表项
        let act = {
          title: item.actionName,
          key: item.id,
        };
        // 查询该项模块是否存在，若存在返回该模块对应的一级列表项
        let moduleItem = modules.find(
          (moduleItem) => moduleItem.title == item.moduleName
        );
        if (!moduleItem) {
          // 模块不存在，创建该模块对应的一级列表项，并放入数组中
          moduleItem = {
            title: item.moduleName,
            key: item.moduleName,
            children: [act],
          };
          modules.push(moduleItem);
        } else {
          // 模块已存在，将二级列表项放入该模块中
          moduleItem.children.push(act);
        }
      });
      return modules;
    },
    // 属性控件选择后 触发回调
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys;
      console.log("selectedKeys", selectedKeys);
    },
    // 树形控件 伸展
    onExpand(expandedKeys) {
      console.log("伸展");
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    // 在模态加载完成后 对select 进行选择上的填充
    async init(state) {
      //如果是修改操作
      if (state == "update") {
        // 当前模式是修改 不显示树形控件
        this.ModeModify = true;
        this.modal_title = "更新";
        this.$nextTick(async () => {
          // 用方法 来进行单独处理
          this.visible = true;
          // 设置更新标志 让确认时 发送不同的请求
          this.state_update = true;
        });
        this.$emit("refreshDataList");
      } else {
        // 当前模式新增,显示树形控件
        this.ModeModify = false;
        this.modal_title = "新增";
        // 新增操作
        this.checkedKeys = [];
        this.value = undefined;
        this.user_name = "";
        this.user_desc = "";
        this.state_update = false;
        this.$nextTick(async () => {
          this.visible = true;
        });

        const { data: res } = await this.$http.get("/admin/perms");
        this.treeData = this.copeThree(res.data);
        // 新增模式下 获取树形控件信息
        this.$emit("refreshDataList");
      }
    },
    // 模态的确认按钮触发
    async handleOk(e) {
      this.loading = true;
      //根据父元素的选择 选择其下子元素
      if (this.state_update == false) {
        //新增操作 将checkedKeys中选中的信息 赋值进去
        this.treeselect = this.checkedKeys.filter((item) => {
          return !isNaN(item);
        });
        const { data: res } = await this.$http.post("/admin/role", {
          name: this.user_name,
          permissions: this.treeselect,
          desc: this.user_desc,
        });
        if (res.code == 200) {
          this.common.notify("success", "新增成功");

          // this.$message.success("新增成功");
          this.user_name = "";
          this.user_desc = "";
          this.treeselect = [];
          this.checkedKeys = [];
          this.$emit("refreshDataList");
        }
      } else {
        //更新操作
        this.state_update == false; // 初始化
        this.treeselect = this.checkedKeys.filter((item) => {
          return !isNaN(item);
        });
        const { data: res } = await this.$http.put("/admin/role", {
          id: this.id,
          name: this.user_name,
          permissions: this.treeselect,
          desc: this.user_desc,
        });
        if (res.code == 200) {
          this.common.notify("success", "修改成功");

          // this.$message.success("修改成功");
          this.$emit("refreshDataList");
        }
      }
      setTimeout(() => {
        this.visible = false;
        this.loading = false;
      }, 1000);
    },
    // 模态的取消按钮触发
    handleCancel(e) {
      this.value = undefined;
      this.user_name = "";
      this.user_desc = "";
      this.treeselect = [];
      this.visible = false;
      this.$emit("refreshDataList");
    },
    async update(record) {
      this.treeselect = [];
      // 将ID放置全局 让其他人访问。
      this.id = record.id;
      let state = "update";
      this.init(state);
      const { data: res } = await this.$http.get(`/admin/role/${record.id}`);
      this.user_name = res.data.name;
      this.user_desc = res.data.desc;
      // 双重for 循环 找到 permissions 序列 对应的节点。 通过
      // 判断是否是连续数  如果增删改查 都存在 就改为父节点
      this.checkedKeys = res.data.permissions;
      this.visible = true;
    },
  },
  watch: {
    checkedKeys(val) {},
  },
};
</script>
<style  lang='less' scoped>
.name_part {
  display: flex;
  .name_label {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 28px;
  }
}
.desc_part {
  display: flex;
  margin-top: 20px;
  .desc_label {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 28px;
  }
}
.permission_part {
  display: flex;
  margin-top: 20px;
  .permission_label {
    width: 50px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 25px;
  }
}
// /deep/ .ant-input-affix-wrapper .ant-input {
//   width: 283px;
// }
/deep/ .ant-modal-body {
  text-align: center;
}
.name_label {
  margin-left: 50px;
}
.desc_label {
  margin-left: 50px;
}
/deep/ .permission_part .permission_label[data-v-50b5eec0] {
  width: 60px;
}

.permission_part {
  display: flex;
  margin-top: 20px;
  .permission_label {
    width: 50px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    margin-right: 25px;
  }
}
</style>